<template>
  <div class="box">
      <h4>任务列表</h4>
            <div class="list">
                <ul>
                    <li v-for="(item,index) in this.$store.state.list" :key="index" :class="{none:item.status==false}">
                        <!-- key的添加提高了渲染效率                         如果list元素的status属性为false 赋予noneclass名字    -->
                        <input type="checkbox" @click="changeStatus(item)">
                        <span>{{item.id}} {{item.text}}</span>
                        
                        <button @click="del(index)">删除</button>
                    </li>
                </ul>
            </div>
            <div class="empty" v-show="this.$store.state.list.length == 0">没有任务，快去添加任务吧！</div>
  </div>
</template>

<script>
export default {
    methods:{
        del(index){
            this.$store.commit('del',index)
        },
        changeStatus(item){
            this.$store.commit('changeStatus',item);
        }
    }
}
</script>

<style lang="scss" scoped>
        .box {
            width: 100%;
        }
        h4{
            margin: 40px 10px;
            
        }
        
        .list li {
            width: 94%;
            height: 30px;
            background-color: lightblue;
            display: flex;
            margin: 5px 5px;
            align-items: center;
            padding: 0 5px;

        }
        .list li input{
            width: 10%;
        }
        .list li button{
            height: 26px;
        }
        .list li span{
            flex: 1;
        }
        .empty{
            width: 100%;
            height: 50px;
            text-align: center;
            
        }
        .list .none{
            background-color: red;
            color: white;
        }

</style>